//网页脚本
/*
  区别一个let 和var的用法
  let用于局部变量，限制作用域
  var用于全局变量，作用域为全局
   */

//-------------------------------------------------授权管理->授权用户------------------------------------
//这个变量是刷新的数据来源，根据最近的一次查询结果来确定
let dataSourceUrl
//表格刷新的请求方式,根据最近的一次查询结果来确定
let flushMethod


//格式检查
//用户名匹配模式：字母开头,允许5-16字节，允许字母数字下划线
function checkName(name){
    return new RegExp('^[a-zA-Z][a-zA-Z0-9_]{4,15}$').test(name)
}
//id匹配模式：非负正整数
function checkId(id) {
    return new RegExp('^([1-9][0-9]*)$').test(id)
}
//密码匹配模式：字母开头,允许5-16字节，允许字母数字下划线
function checkPassWord(password) {
    return  new RegExp('^[a-zA-Z][a-zA-Z0-9_]{4,15}$').test(password)
}


//自定义局部刷新表格对象，其中包含局部刷新表格的方法
let myTable = {
    table:layui.table,
    tableFlush: function(dataSourceUrl,sendMethod){
        this.table.render({
            elem:'#dataTable'
            ,cellMinWidth: 100
            ,height: 616
            ,method: sendMethod //请求方式
            ,url: dataSourceUrl //数据接口
            ,page: true//开启分页
            ,autoSort:true
            ,limit:14
            ,size:'lg'
            ,even:true
            ,response:{
                statusCode: 200,
            }
            //动态数据表格
            //如果响应数据格式不符合layui默认要求，则需要用到phraseData
            ,cols: [ [ //表头,两个括号间的空格不能去
                {field: 'index', title: '序号', width:'10%', unresize:true, sort: true },
                {field: 'userId', title: 'ID', width:'37%',unresize:true},
                {field: 'userName', title: '用户名', width:'37%',unresize:true},
                {fixed: 'right', title: '操作', toolbar:"#operations",width:'16%',unresize:true}//为每行数据添加操作按钮
            ] ]

        })


    }



}




//当layui模板启动时，执行的有关数据表格的layui事件
layui.use('table',function () {
    let editVue = new Vue({                //编辑弹窗用户信息动态显示
        el:"#modify_View",
        data:{
            modify_idView:'',
            modify_username:'',
            modify_password:'',
            modify_password_identify:''
        },
        methods: {
            editCheckAndSubmit:function (event){//编辑弹窗点击提交
            if( this.modify_password !== '' && this.modify_password_identify === ''){//密码框非空
                layer.msg("请确认密码！",{
                    time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
                })
                this.modify_password_identify = ''
                this.modify_password = this.modify_password_identify
            }else if(this.modify_password === '' && this.modify_password_identify !== ''){//确认密码框非空
                layer.msg("请先输入密码！",{
                    time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
                })
                this.modify_password_identify = ''
                this.modify_password = this.modify_password_identify
            }else if(!checkName(this.modify_username)){//用户名非法
                layer.msg("用户名非法！",{
                    time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
                })
                this.modify_username = ''
            }else if(!checkPassWord(this.modify_password) && this.modify_password !== ''){//密码格式非法
                layer.msg("密码非法！",{
                    time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
                })
                this.modify_password_identify = ''
                this.modify_password = this.modify_password_identify
            }else if(this.modify_password !== this.modify_password_identify){//两次密码不一致
                layer.msg("两次密码不一致，请重新输入密码！",{
                    time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
                })
                this.modify_password_identify = ''
                this.modify_password = this.modify_password_identify
            }else{
                layer.confirm('真的修改么？', function(index){
                    //这里发送ajax
                    let responseText= jQuery.ajax({
                        method: 'post',
                        async:false,
                        url:jQuery('#editVisitor').attr('action'),
                        data:{
                            userName:editVue.$data.modify_username,
                            userId: editVue.$data.modify_idView,
                            userPassword:editVue.$data.modify_password
                        }
                    }).responseText


                    //清空数据
                    editVue.$data.modify_idView =''
                    editVue.$data.modify_username =''
                    editVue.$data.modify_password_identify =''
                    editVue.$data.modify_password =''
                    jQuery('#openEditProductBox').hide()
                    layer.closeAll()
                    layer.msg("系统提示："+responseText,{
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    })
                    myTable.tableFlush(dataSourceUrl,flushMethod)//刷新表格
                })

            }

            }
        }
    })

    //表初始化查询
    flushMethod = 'get'//刷新的请求方式设置为get
    dataSourceUrl = document.getElementById("dataSource").action//数据源设定
    myTable.tableFlush(dataSourceUrl, flushMethod)

    //表头工具栏进行操作的脚本
    myTable.table.on('tool(dataTable)', function(obj){
        let data = obj.data; //返回的是一个Blob类型
        //console.log(obj)
        let JSONStringData = JSON.stringify(data)//将Blob类型转化为JSON字符串
        let JSONData = JSON.parse(JSONStringData)//JSON字符串转化为JSON对象
        let userId = JSONData.userId //提取userId字段
        let userName = JSONData.userName//提取userName字段
        let responseMessage
        if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
                let deleteUrl = document.getElementById("deleteVisitor").action +userId //请求参数凭借在url中
                // alert(deleteUrl)
                //注意，jQuery的'$'一些方法会与一些框架中通符号冲突，所以，建议使用如下方法调用jQuery的方法
                //利用jquery发送ajex请求
                responseMessage =  jQuery.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    async: false,
                }).responseText
                layer.msg('系统提示：'+responseMessage,null) ;

            });

        } else if(obj.event === 'edit'){
            let editUrl = document.getElementById("deleteVisitor").action
            //一下是通过弹出层进行数据修改的方法
            //编辑弹窗数据检查
            editVue.$data.modify_idView = userId
            editVue.$data.modify_username = userName
            layer.open({
                type:1,
                title: '修改用户信息，不修改选项可以空缺',
                content: jQuery('#openEditProductBox'),//利用jQuery嵌入弹出层容器
                area:['430px','360px'],
                end:function (){
                    jQuery('#openEditProductBox').hide()
                }
            });

        }
    });

})



//监听layui表单事件
layui.use('form',function (){
    var form = layui.form
})



//当vue模板启动时,与后端进行增查操作的框架
let vue1 = new Vue({
    el:"#selectSubmit",
    data:{
        message:''
    },

    methods: {
        //刷新表格，数据源和请求方式时依据最近一次查询操作确定
        flushMe:function (event){
            myTable.tableFlush(dataSourceUrl,flushMethod)
            layer.msg("已重新获取数据",{
                time: 2500 //2秒关闭（如果不配置，默认是3秒）
            })
            event.preventDefault()
        },

        //查询行为管理
        selectSubmit:function (event){
            let rootUrl = document.getElementById("selectVisitor").action
            let choice = document.getElementsByName("userChoice")
            let realChoice = null

            for (let i = 0; i <choice.length ; i++) {
                if (choice[i].checked) realChoice = choice[i].value //因为单选框这个组件的数值传递，vue框架的v-model属性和layui要求冲突，所以这里不用v-model传值
            }
            let resultMessage = this.message
            let url = null
            url = rootUrl+realChoice+'/'+resultMessage
            if(realChoice === 'byName'){//如果是通过用户名匹配，则进入用户名合法性验证
                if(!resultMessage){
                    layer.msg("查询信息不能为空！",{
                        time:1500
                    })
                }else if(checkName(resultMessage)){//用户名是否合法
                    // alert(url)
                    flushMethod = 'get'
                    myTable.tableFlush(url,flushMethod)
                    dataSourceUrl = url
                }else{
                    layer.msg("用户名非法！",{
                        time:1500
                    })
                }
            }else{//否则进入id匹配模式
                if(!resultMessage){
                    layer.msg("查询信息不能为空！",{
                        time:1500
                    })
                }else if(checkId(resultMessage)){//id是否合法
                    // alert(url)
                    flushMethod = 'get'//更新请求方式
                    myTable.tableFlush(url,flushMethod)
                    dataSourceUrl = url//更新刷新数据源
                }else{
                    layer.msg("ID非法！",{
                        time:1500
                    })
                }
            }

            event.preventDefault()
        },

        //添加弹窗
        addButton: function (event) {
            layer.open({
                title:'添加',
                content: jQuery("#addForm"),
                type:1,
                area:['450px','320px'],
                resize:false,
                end:function () {
                    jQuery("#addForm").hide();//结束后一定要隐藏窗口

                }

            })
        },



    }


})

//添加事件提交
let addVue = new Vue({
    el:"#addForm",
    data:{
        add_username:'',
        add_password:'',
        add_password_identify:''
    },
    methods:{
        addSubmit:function (event) {
            if(this.add_username ===''){
                layer.msg("用户名不能为空!",{
                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                })
            }else if(this.add_password ===''){
                layer.msg("密码不能为空!",{
                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                })
            }else if(this.add_password_identify === ''){
                layer.msg("请确认密码!",{
                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                })
            }else if(!checkName(this.add_username)){
                layer.msg("用户名非法!",{
                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                })
            }else if(!checkPassWord(this.add_password)){
                layer.msg("密码非法!",{
                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                })
                this.modify_password = this.modify_password_identify = ''
            }else {
                axios({
                    url:jQuery('#addVisitor').attr('action'),
                    method:'put',
                    data:{
                        userInfo:{
                            userName:this.add_username,
                            password:this.add_password
                        }

                    },

                }).then(function (response) {
                    let responseMsg = JSON.stringify(response.data)
                    if(responseMsg === "true"){
                        jQuery('#addForm').hide()
                        layer.closeAll()
                        addVue.$data.add_username = ''
                        addVue.$data.add_password = ''
                        addVue.$data.add_password_identify = ''
                        myTable.tableFlush(dataSourceUrl,flushMethod)
                        layer.msg("添加成功", {
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                    }else{
                        layer.msg("添加失败！该用户已存在或者服务器连接故障", {
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                    }

                })
            }
        }
    }
})


//jQuery事件
jQuery(document).ready(function () {
    jQuery('#editButton').click(function () {
        layer.open({
            type:1,
            title:'又弹出一个窗口'
        })
    })

    //编辑弹窗取消按钮事件
    jQuery('#editCancel').click(function (){
        layer.closeAll()
        jQuery('#openEditProductBox').hide()

    })

    //添加弹窗取消按钮
    jQuery('#addCancel').click(function (){
        layer.closeAll()
        jQuery('#addForm').hide()
    })

    //编辑弹窗输入格式提示
    jQuery('#userNameInputTick').mouseover(function (){
        layer.msg('用户名格式：字母开头,5-16个字母数字下划线',null) ;
    })

    jQuery('#userPasswordInputTick').mouseover(function (){
        layer.msg('密码格式：字母开头,5-16个字母数字下划线',null) ;
    })

    //添加弹窗输入格式提示
    jQuery('#add_username_label').mouseover(function (){
        layer.msg('用户名格式：字母开头,5-16个字母数字下划线',null) ;
    })

    jQuery('#add_password_label').mouseover(function (){
        layer.msg('密码格式：字母开头,5-16个字母数字下划线',null) ;
    })


})


